import React, { Component } from 'react';
import address from '../css/Address.module.css'
import { Button, Pagination, Row, Col, Icon, Input, Checkbox } from 'antd';
import { BrowserRouter as Router, Route, NavLink, Redirect } from 'react-router-dom'
import axios from 'axios'

export default class Address extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            page: 1,
            pid:''
        }
    }
    // 收货地址列表
    componentDidMount() {
        let _this = this
        let token = localStorage.getItem('token')
        axios({
            method: 'get',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/addresses',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
            params: {
                per: 3,
                page: 1,
            }
        }).then(function (data) {
            console.log(data.data.addresses)
            _this.setState({
                list: data.data.addresses,
                page: data.data.totalCount
            })
        })
    }
    render() {
        var _this=this
        return (
            <div>
                <div className={address.main}>
                    <div className={address.maincenter}>
                        <div className={address.manmge} ref="manm">
                            <div className={address.maintop}>
                                <h2>地址管理</h2>
                                <div className={address.mainbutton}>
                                    <Button type="primary" onClick={this.newaddress.bind(this)}><span>+</span>新增收货地址</Button>
                                </div>
                            </div>
                            <span className={address.xian}></span>
                            <div className={address.mainbottom}>
                                <div className={address.mainbiaoti}>
                                    <Row>
                                        <Col span={16}>
                                            <Row type="flex" justify="space-between">
                                                <Col span={4}>收货人</Col>
                                                <Col span={4}>所在地区</Col>
                                                <Col span={4}>详细地址</Col>
                                                <Col span={4}>邮编</Col>
                                            </Row>
                                        </Col>
                                        <Col span={8}>
                                            <Row type="flex" justify="space-between">
                                                <Col span={6}>电话/手机</Col>
                                                <Col span={4}>操作</Col>
                                                <Col span={4}>默认地址</Col>
                                            </Row>
                                        </Col>
                                    </Row>
                                </div>
                                <span className={address.xian}></span>

                                {
                                    this.state.list.map(function (item, i) {
                                        return (
                                            <div>
                                                <div className={address.mainzhuti} key={i}>
                                                    <Row>
                                                        <Col span={16}>
                                                            <Row type="flex" justify="space-between">
                                                                <Col span={4}>{item.receiver}</Col>
                                                                <Col span={4}>---</Col>
                                                                <Col span={4}>{item.address}</Col>
                                                                <Col span={4}>{item.regions}</Col>
                                                            </Row>
                                                        </Col>
                                                        <Col span={8}>
                                                            <Row type="flex" justify="space-between">
                                                                <Col span={6}>{item.mobile}</Col>
                                                                <Col span={4}><Icon type="edit" onClick={_this.redactaddress.bind(_this,item._id)} /><b>|</b><Icon type="delete" onClick={_this.deladdress.bind(_this,item._id)} /></Col>
                                                                <Col span={4}>{item.isDefault}</Col>
                                                            </Row>
                                                        </Col>
                                                    </Row>
                                                </div>
                                                <span className={address.xian}></span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                            <div className={address.page}>
                                <div className={address.pagecenter}>
                                    <Pagination defaultCurrent={1} total={this.state.page} defaultPageSize={3} onChange={this.page.bind(this)} />
                                </div>
                            </div>
                        </div>
                        {/* 新增收货地址 */}
                        <div className={address.newly} ref="nely">
                            <div className={address.maintop}>
                                <h2>新增收货地址</h2>
                            </div>
                            <span className={address.xian}></span>
                            <div className={address.newlyaddress}>
                                <ul>
                                    <li>
                                        <b>*详细地址: </b><Input placeholder="" />
                                    </li>
                                    <li>
                                        <b>邮编：</b><Input placeholder="" />
                                    </li>
                                    <li>
                                        <b>*收货人姓名：</b><Input placeholder="" />
                                    </li>
                                    <li>
                                        <b>*联系方式：</b><Input placeholder="" />
                                    </li>
                                    <li>
                                        <b></b><Checkbox>设置为默认地址</Checkbox>
                                    </li>
                                    <li>
                                        <Button type="primary" size="large" onClick={this.add.bind(this)}>保存</Button>
                                        <Button size="large" onClick={this.cancel.bind(this)}>取消</Button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        {/* 编辑收货地址 */}
                        <div className={address.redact} ref="redact">
                            <div className={address.maintop}>
                                <h2>编辑收货地址</h2>
                            </div>
                            <span className={address.xian}></span>
                            <div className={address.newlyaddress}>
                                <ul>
                                    <li>
                                        <b>*详细地址: </b><Input placeholder="" />
                                    </li>
                                    <li>
                                        <b>邮编：</b><Input placeholder="" />
                                    </li>
                                    <li>
                                        <b>*收货人姓名：</b><Input placeholder="" />
                                    </li>
                                    <li>
                                        <b>*联系方式：</b><Input placeholder="" />
                                    </li>
                                    <li>
                                        <b></b>默认地址
                                    </li>
                                    <li>
                                        <Button type="primary" size="large" onClick={this.add1.bind(this)}>保存</Button>
                                        <Button size="large" onClick={this.cancel.bind(this)}>取消</Button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    newaddress() {
        this.refs.manm.style.display = "none"
        this.refs.redact.style.display = "none"
        this.refs.nely.style.display = 'block'
    }
    cancel() {
        this.refs.manm.style.display = "block"
        this.refs.nely.style.display = 'none'
        this.refs.redact.style.display = "none"
    }
    redactaddress(id) {
        console.log(id)
        this.setState({pid:id})
        this.refs.manm.style.display = "none"
        this.refs.nely.style.display = 'none'
        this.refs.redact.style.display = "block"
    }
    // 修改收货接口
    add1() {
        let _this=this
        let token = localStorage.getItem('token')
        let ipt = document.querySelectorAll('input')
        let id=this.state.pid
        axios({
            method: 'put',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/addresses/'+id,
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
            data: {
                receiver: ipt[7].value,
                mobile: ipt[8].value,
                address: ipt[5].value,
                regions: ipt[6].value,
            }
        }).then(function (data) {
            console.log(data)
            _this.refs.manm.style.display = "block"
            _this.refs.nely.style.display = 'none'
            _this.refs.redact.style.display = "none"
            window.location.reload()
            _this.setState({
                list:data.config.data
            })
        })
    }
     // 删除收货接口
     deladdress(id,e) {
         console.log(id,e.target)
        let token = localStorage.getItem('token')
        console.log(token)
        e.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.remove()
        axios({
            method:'post',
            url:'http://api.cat-shop.penkuoer.com/api/v1/addresses/'+id,
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
        }).then(function(data){
            console.log(data)
        })
    }
    // 新增收货接口
    add() {
        var _this = this
        let token = localStorage.getItem('token')
        let ipt = document.querySelectorAll('input')
        axios({
            method: 'post',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/addresses',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
            data: {
                receiver: ipt[2].value,
                mobile: ipt[3].value,
                address: ipt[0].value,
                regions: ipt[1].value,
                idDefault: ipt[4].checked
            }
        }).then(function (data) {
            alert(data.data.message)
            _this.refs.manm.style.display = "block"
            _this.refs.nely.style.display = 'none'
            _this.refs.redact.style.display = "none"
            window.location.reload()
        })
    }
    page(e) {
        let _this = this
        let token = localStorage.getItem('token')
        axios({
            method: 'get',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/addresses',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
            params: { per: 3, page: e }
        }).then(function (data) {
            _this.setState({
                list: data.data.addresses,
                page: data.data.totalCount
            })
        })
    }
}